<template>
  <div>
    <div v-if="indexpage" class="login">
      <div style="margin-bottom: 250px; width: 1px; height: 1px"></div>
      <div class="btnc" @click="handleindexpage">
        <img src="/loginclose.png" alt="" />
      </div>
      <div class="select">
        <div class="center">
          <div class="left">
            <p>我是家长，我想请家教</p>

            <span @click="handlezregister">家长注册/登录</span>
          </div>
          <div class="right">
            <p>我是老师，我想做家教</p>
            <span @click="handlesregister">教师注册/登录</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 教师注册 -->
    <div v-if="zregister" class="login">
      <div class="btnc" @click="handleindexpage">
        <img src="/loginclose.png" alt="" />
      </div>
      <div style="width: 1px; height: 1px; margin-bottom: 250px"></div>
      <div class="select parent">
        <div class="rights">
          <div class="nav">
            <div class="btns">家长注册</div>
            <div class="btns" @click="handlezlogin">立即登录</div>
          </div>
          <div class="input">
            <div><input type="text" placeholder="请输入手机号" /></div>
            <div><input type="password" placeholder="请输入密码" /></div>
            <div><input type="password" placeholder="请确认密码" /></div>
          </div>
          <div>
            <div class="zhuce">注册</div>
            <div class="xieyi">
              新用户登录即注册，并表示您已同意严选家教
              <a href="#">[用户协议]</a>及<a href="#">[隐私政策]</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教师登录 -->
    <div v-if="zlogin" class="login">
      <div class="btnc" @click="handleindexpage">
        <img src="/loginclose.png" alt="" />
      </div>
      <div style="width: 1px; height: 1px; margin-bottom: 250px"></div>
      <div class="select parent">
        <div class="rights">
          <div class="nav">
            <div class="btns" @click="handlezregister">注册</div>
            <div class="btns">立即登录</div>
          </div>
          <div class="input">
            <div>
              <input v-model="tphone" type="text" placeholder="请输入手机号" />
            </div>
            <div>
              <input v-model="tpwd" type="password" placeholder="请输入密码" />
            </div>
            <div>
              <input
                v-model="tpwd"
                type="password"
                placeholder="请确认验证码"
              />
            </div>
          </div>
          <div>
            <div class="zhuce" @click="TeacherGoLogin">登录</div>
            <div class="xieyi">
              新用户登录即注册，并表示您已同意严选家教
              <a href="#">[用户协议]</a>及<a href="#">[隐私政策]</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 家长注册 -->
    <div v-if="sregister" class="login">
      <div class="btnc" @click="handleindexpage">
        <img src="/loginclose.png" alt="" />
      </div>
      <div style="width: 1px; height: 1px; margin-bottom: 250px"></div>
      <div class="select parent">
        <div class="rights">
          <div class="nav">
            <div class="btns">教师注册</div>
            <div class="btns" @click="handleslogin">立即登录</div>
          </div>
          <div class="input">
            <div><input type="text" placeholder="请输入手机号" /></div>
            <div><input type="password" placeholder="请输入密码" /></div>
            <div><input type="password" placeholder="请确认密码" /></div>
          </div>
          <div>
            <div class="zhuce">注册</div>
            <div class="xieyi">
              新用户登录即注册，并表示您已同意严选家教
              <a href="#">[用户协议]</a>及<a href="#">[隐私政策]</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 家长登录 -->
    <div v-if="slogin" class="login">
      <div class="btnc" @click="handleindexpage">
        <img src="/loginclose.png" alt="" />
      </div>
      <div style="width: 1px; height: 1px; margin-bottom: 250px"></div>
      <div class="select parent">
        <div class="rights">
          <div class="nav">
            <div class="btns" id="jszc">教师注册</div>
            <div class="btns">立即登录</div>
          </div>
          <div class="input">
            <div>
              <input v-model="sphone" type="text" placeholder="请输入手机号" />
            </div>
            <div>
              <input v-model="spwd" type="password" placeholder="请输入密码" />
            </div>
            <div>
              <input
                v-model="spwd"
                type="password"
                placeholder="请确认验证码"
              />
            </div>
          </div>
          <div>
            <div class="zhuce" @click="StudentGoLogin">登录</div>

            <div class="xieyi">
              新用户登录即注册，并表示您已同意No.1家教
              <a href="#">[用户协议]</a>及<a href="#">[隐私政策]</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexpage: true,
      zregister: false,
      zlogin: false,
      sregister: false,
      slogin: false,
      tphone: "",
      tpwd: "",
      sphone: "",
      spwd: "",
    };
  },
  methods: {
    StudentGoLogin() {
      let sphone = this.sphone;
      let spwd = this.spwd;
      let parems = `sphone=${sphone}&spwd=${spwd}`;
      this.axios.post("/student/login", parems).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          alert("登录成功");
        } else {
          alert("登陆失败");
        }
      });
    },
    TeacherGoLogin() {
      let tphone = this.tphone;
      let tpwd = this.tpwd;
      let parems = `tphone=${tphone}&tpwd=${tpwd}`;
      this.axios.post(`/teacher/login`, parems).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          alert("成功");
          this.$router.push("/aboutus");
        } else {
          alert("失败");
        }
      });
      this.$store.commit("CloseLogin", false);
      // console.log($store.state.close);
      this.$nextTick(
        () => (this.indexpage = true),
        this.$store.commit("CloseLogin", false)
      );
    },

    handleindexpage() {
      this.indexpage = false;
      (this.zregister = false),
        (this.zlogin = false),
        (this.sregister = false),
        (this.slogin = false);
      this.$store.commit("CloseLogin", false);
      // console.log($store.state.close);
      this.$nextTick(
        () => (this.indexpage = true),
        this.$store.commit("CloseLogin", false)
      );
    },
    handlezregister() {
      this.indexpage = false;
      this.zregister = true;
      this.zlogin = false;
    },
    handlezlogin() {
      this.zregister = false;
      this.zlogin = true;
    },
    handlesregister() {
      this.indexpage = false;
      this.sregister = true;
      this.slogin = false;
    },
    handleslogin() {
      this.zregister = false;
      this.zlogin = true;
    },
  },
};
</script>

<style src="../assets/style.css"></style>